<template>
    <basic-container>
      <avue-crud
        :option="option"
        :search.sync="search"
        :table-loading="loading"
        :data="data"
        :page.sync="page"
        :permission="permissionList"
        :before-open="beforeOpen"
        v-model="form"
        ref="crud"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @refresh-change="refreshChange"
        @sort-change="sortChange"
        @on-load="onLoad"
      >
        <!-- @on-load="onLoad" -->
        <template slot="menuRight">
          <el-button
            type="warning"
            size="small"
            plain
            icon="el-icon-download"
            v-if="permission.summaryOfCashback_export"
            @click="handleExport"
            >导出
          </el-button>
        </template>
        <template slot-scope="{}" slot="rpiNoSearch">
          <select-page ref="searchRpiSelect" label="rpiName" value="rpiNo" :select.sync="search.rpiNo" :url="website.searchLink.merchantUrl" placeholder-text="商户" filter-key="searchParam"></select-page>
        </template>
        <template slot-scope="{}" slot="serviceNoSearch">
          <select-page ref="searchSerSelect" label="serviceName" value="serviceNo" :select.sync="search.serviceNo" :url="website.searchLink.serviceUrl" placeholder-text="服务商" filter-key="searchParam"></select-page>
        </template>
        <template slot-scope="{}" slot="orgNoSearch">
          <select-page ref="searchOrgSelect" label="serviceName" value="serviceNo" :select.sync="search.orgNo" :url="website.searchLink.orgUrl" placeholder-text="机构" filter-key="searchParam"></select-page>
        </template>
      </avue-crud>
    </basic-container>
  </template>

  <script>
  import { getList, getExport } from "@/api/rb-oem/member/member";

  import { mapGetters } from "vuex";
  // import { getToken } from "@/util/auth";
  import { dateFormat } from "@/util/date";
  import selectPage from "@/components/select-page/select-page";

  export default {
    components: {
      selectPage
    },
    data() {
      return {
        form: {},
        query: {},
        search: {},
        loading: false,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0
        },
        selectionList: [],
        option: {
          height: "calc(50vh - 50px)",
          calcHeight: 30,
          tip: false,
          border: true,
          index: true,
          viewBtn: false,
          editBtn: false,
          addBtn: false,
          delBtn: false,
          selection: true,
          searchMenuSpan: 24,
          columnBtn: false,
          labelWidth: 120, //弹出表单的标题的统一宽度
          searchLabelWidth: 120, //搜索框标题宽度
          menuWidth: 100, //操作栏宽度
          emptyBtnText:'重置',
          // searchIcon:true,
          // searchIndex:3,
          menu:false,
          column: [
            {
              label: "会员ID",
              searchLabel: "会员ID",
              prop: "memberNo",
              type: 'input',
              search: true,
              overHidden:true,
              minWidth: 100,
              searchOrder: 0
            },
            {
              label: "会员openId",
              searchLabel: "会员openId",
              prop: "openId",
              type: 'input',
              search: true,
              overHidden:true,
              minWidth: 100,
              searchOrder: 0
            },
            {
              label: "会员昵称",
              prop: "memberName",
              type: "input",
              search: true,
              minWidth: 150
            },
            {
              label: "会员手机号",
              prop: "mobile",
              type: "input",
              search: true,
              minWidth: 150
            },
            {
              label: "会员类型",
              prop: "memberTypeName",
              type: "input",
              minWidth: 150
            },
            {
              label: "会员类型",
              prop: "memberType",
              type: "select",
              dataType: "number",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              search: true,
              dicUrl: "/api/blade-system/dict/dictionary?code=member_type",
              minWidth: 150,
            },
            {
              label: "会员等级",
              prop: "memberLevelName",
              type: "input",
              minWidth: 150
            },
            {
              label: "会员等级",
              prop: "memberLevel",
              type: "select",
              dataType: "number",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              search: true,
              dicUrl: "/api/blade-system/dict/dictionary?code=member_level",
              minWidth: 150,
            },
            {
              label: "会员状态",
              prop: "statusName",
              type: "input",
              minWidth: 150
            },
            {
              label: "会员状态",
              prop: "status",
              type: "select",
              dataType: "number",
              props: {
                label: "dictValue",
                value: "dictKey"
              },
              search: true,
              dicUrl: "/api/blade-system/dict/dictionary?code=member_status",
              minWidth: 150,
            },
            {
              label: "绑定商户编号",
              prop: "rpiNo",
              type: "input",
              minWidth: 180
            },
            {
              label: "绑定商户名称",
              prop: "rpiName",
              type: "input",
              minWidth: 180
            },
            {
              label: "注册日期",
              prop: "createTime",
              type: "input",
              minWidth: 140
            }
          ]
        },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          viewBtn: this.vaildData(this.permission.summaryOfCashback_view, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach((ele) => {
          ids.push(ele.id);
        });
        return ids.join(",");
      },
      exhibition() {
        return (val) => {
          if (val == "" || val == "-1") {
            return (val = 0);
          } else {
            return val;
          }
        };
      },
    },
    methods: {
      /**
       * @func edit,view 打开之前回调
       * @desc 点击获取点击天数时间
       * */
      beforeOpen(done, type) {
        if (["edit", "view"].includes(type)) {
          // getDetail(this.form.id).then(res => {
          //   this.form = res.data.data;
          // });
        }
        done();
      },
      /**
       * @func 重置
       * @desc 重置查询条件
       * */
      searchReset() {
        this.query = {};
        this.search = {};
        this.onLoad(this.page);
      },
      /**
       * @func 搜索
       * @desc 根据条件查询
       * @param {params} params --- 条件查询
       * */
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      /**
       * @func 选中单元格
       * @desc 选中单元格数据
       * @param {list} list --- 选中单元格数据-数组
       * */
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      /**
       * @func 分页页码
       * @desc 分页页码改变时会触发
       * */
      currentChange(currentPage) {
        this.page.currentPage = currentPage;
        // this.refreshChange();
        this.onLoad(this.page, this.query);

      },
      /**
       * @func 当前页个数
       * @desc pageSize改变时会触发
       * */
      sizeChange(pageSize) {
        this.page.pageSize = pageSize;
        // this.refreshChange();
        this.onLoad(this.page, this.query);

      },
      /**
       * @func 刷新
       * @desc 点击刷新按钮触发该事件
       * */
      refreshChange() {
        this.onLoad(this.page, this.query);
      },
      /**
       * @func 初始化
       * @desc 表格初始化查询数据
       * */
      onLoad(page, params = {}) {
        this.loading = true;
        let paramObj = Object.assign(params, this.query);
        if (!this.validatenull(paramObj.createData)) {
          paramObj.rewardTimeBegin = paramObj.createData[0] || ''
          paramObj.rewardTimeEnd = paramObj.createData[1] || ''
        }
        delete paramObj.createData

        getList(
          page.currentPage,
          page.pageSize,
          paramObj
        ).then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          this.selectionClear();
        });
      },
      /**
       * @func 导出
       * @desc 根据条件导出
       * */
      handleExport() {
        let params ={
          ...this.search,
          current:'-1',
          size:'-1'
        }
        this.$confirm("是否导出用户数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          getExport(params).then((res) => {
            this.$message({
              type: "success",
              message: res.data.msg
            });
          },(error) => {
              window.console.log(error);
            }
          );
        })
      },
      /**
       * @func 排序
       * @desc 根据表格字段排序
       * */
      sortChange(val) {
        if (val.order == "ascending") {
          //正序
          this.query.ascs = val.prop;
          this.query.descs = "";
        } else {
          //倒序
          this.query.descs = val.prop;
          this.query.ascs = "";
        }
        this.refreshChange();
      },
    },
  };
  </script>

  <style lang="scss" scoped>
  .curd-foter {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .redFontBox {
    margin-right: 40px;
    .redFont {
      color: red;
    }
  }
  /deep/ .el-tag--dark.el-tag--success {
    border: none !important;
  }
  </style>
